<template>
  <div>
    <a-row :gutter='10'>
      <a-col :span='5'>
        <a-card :bordered="false" title='报工信息' :loading='confirmLoading'>
          <a-descriptions :column='1'>
            <a-descriptions-item label="设备">
              {{data.deviceName}}
            </a-descriptions-item>
            <a-descriptions-item label="员工">
              {{data.employee}}
            </a-descriptions-item>
            <a-descriptions-item label="班次">
              {{data.banci}}
            </a-descriptions-item>
          </a-descriptions>
        </a-card>
        <a-card :bordered="false" title='剩余物料信息' style='margin-top: 20px' :loading='confirmLoading'>
          <a-popconfirm slot="extra" title="是否退回该工单所有物料" @confirm="returnMaterial" okText="是" cancelText="否">
            <a href="javascript:;">退料</a>
          </a-popconfirm>
          <vxe-table
            :data='data.workCenterMatPlatformDTOList'
            :height='400'
            border
          >
            <vxe-column title='物料编码' prop='matCode'></vxe-column>
            <vxe-column title='物料名称' prop='matName'></vxe-column>
            <vxe-column title='剩余数量' prop='num'></vxe-column>
          </vxe-table>
        </a-card>
      </a-col>
      <a-col :span='14'>
        <a-card :bordered="false" title='报工信息' :loading='confirmLoading'>
          <a-form layout='horizontal'>
            <a-form-item
              label='报工条码'
              :labelCol=' { span: 4 }'
              :wrapperCol='{ span: 18 }'
            >
              <a-input @pressEnter='handleBarCode' ref='barcodeInput' v-model='barCode'></a-input>
            </a-form-item>
          </a-form>
        </a-card>
        <a-card :bordered="false" title='工单信息' style='margin-top: 20px' :loading='confirmLoading'>
          <a-form-model :form="form">
            <a-row :getter="24">
              <a-col :md="12" :sm="24">
                <a-form-model-item
                  label='执行编号'
                  :labelCol="labelCol"
                  :wrapperCol="wrapperCol"
                >
                  <a-input readonly v-model='data.workCenterPlanCode'></a-input>
                </a-form-model-item>
              </a-col>
              <a-col :md="12" :sm="24">
                <a-form-model-item
                  label='工单号'
                  :labelCol="labelCol"
                  :wrapperCol="wrapperCol"
                >
                  <a-input readonly v-model='data.planCode'></a-input>
                </a-form-model-item>
              </a-col>
            </a-row>

            <a-row :getter="24">
              <a-col :md="12" :sm="24">
                <a-form-model-item
                  label='产品编码'
                  :labelCol="labelCol"
                  :wrapperCol="wrapperCol"
                >
                  <a-input readonly v-model='data.productCode'></a-input>
                </a-form-model-item>
              </a-col>
              <a-col :md="12" :sm="24">
                <a-form-model-item
                  label='产品名称'
                  :labelCol="labelCol"
                  :wrapperCol="wrapperCol"
                >
                  <a-input readonly v-model='data.productName'></a-input>
                </a-form-model-item>
              </a-col>
            </a-row>


            <a-row :getter="24">
              <a-col :md="12" :sm="24">
                <a-form-model-item
                  label='客户编码'
                  :labelCol="labelCol"
                  :wrapperCol="wrapperCol"
                >
                  <a-input readonly></a-input>
                </a-form-model-item>
              </a-col>
              <a-col :md="12" :sm="24">
                <a-form-model-item
                  label='已生产总数'
                  :labelCol="labelCol"
                  :wrapperCol="wrapperCol"
                >
                  <a-input readonly v-model='data.successCount'></a-input>
                </a-form-model-item>
              </a-col>
            </a-row>


            <a-row :getter="24">
              <a-col :md="12" :sm="24">
              </a-col>
              <a-col :md="12" :sm="24">
                <a-form-model-item
                  label='订单总数'
                  :labelCol="labelCol"
                  :wrapperCol="wrapperCol"
                >
                  <a-input readonly v-model='data.productCount'></a-input>
                </a-form-model-item>
              </a-col>
            </a-row>

            <a-row :getter="24">
              <a-col :md="12" :sm="24">
              </a-col>
              <a-col :md="12" :sm="24">
                <a-form-model-item
                  label='不良品数'
                  :labelCol="labelCol"
                  :wrapperCol="wrapperCol"
                >
                  <a-input readonly></a-input>
                </a-form-model-item>
              </a-col>
            </a-row>
          </a-form-model>
          <a-row>
             <a-col :span='2' :push='6'> <a-button type="primary" class='button-ctrl' @click='startPlan' :disabled='data.statusCode === "10"'>开始生产</a-button></a-col>
            <a-col :span='2' :push='12'>  <a-button class='button-ctrl'>结束生产</a-button></a-col>
          </a-row>
          <a-row style='margin-top: 20px'>
            <a-col :span='2' :push='6'><a-button class='button-ctrl' @click='clearInput'>清空扫码</a-button></a-col>
              <a-col :span='2' :push='12'><a-button type="danger" class='button-ctrl'>退出</a-button></a-col>
          </a-row>
        </a-card>
      </a-col>
      <a-col :span='5'>
        <a-card :bordered="false" title='报工信息' :loading='confirmLoading'>
          <vxe-table
            :data='matList'
            :height='300'
            border
          >
            <vxe-column title='报工条码' prop='barcode'></vxe-column>
            <vxe-column title='报工时间' prop='num'></vxe-column>
            <vxe-column title='数量' prop='num'></vxe-column>
          </vxe-table>
        </a-card>
        <a-card :bordered="false" title='待执行工单列表' style='margin-top: 20px' :loading='confirmLoading'>
          <vxe-table
            :data='data.workCenterPlanList'
            :height='300'
            border
          >
            <vxe-column title='排产单号' prop='planCode'></vxe-column>
            <vxe-column title='生产产品名称' prop='productName'></vxe-column>
            <vxe-column title='计划数量' prop='productCount'></vxe-column>
            <vxe-column title='开始时间' prop='planStartDate'></vxe-column>
          </vxe-table>
        </a-card>
      </a-col>
    </a-row>
  </div>

</template>

<script>
import { infoWorkPlatform, release,work } from '@/api/plan/workcenterplan'
import { returnMaterial } from '@/api/produce/WorlCenterMat'
export default {
  name: 'WorkPlatform',
  data() {
    return {
      labelCol: {
        span: 4
      },
      wrapperCol: {
        span: 18
      },
      form: this.$form.createForm(this),
      matList: [],
      workCenterId: '',
      confirmLoading: false,
      data: {
        id: '',
        workCenterPlanCode: '',
        workCenterCode: '',
        workCenterName: '',
        deviceCode: '',
        deviceName: '',
        station: '',
        stationName: '',
        productCode: '',
        productName: '',
        productCount: '',
        successCount: '',
        status: '',
        planCode: '',
        banci: '',
        employee: '',
        workCenterMatPlatformDTOList: [],
        workCenterPlanList: [],
      },
      barCode: ''
    }
  },
  methods: {
    returnMaterial(){
      this.confirmLoading = true
      returnMaterial({
        workCenterPlanCode: this.workCenterPlanCode
      }).then(res => {
        this.$message.success("退料完成");
        this.getInfoWorkPlatform(this.workCenterPlanCode)
      }).catch(err => {
        this.$message.error(err.msg)
      }).finally(() => {
        this.confirmLoading = false
      })
    },
    clearInput(){
      // console.log(this.$refs.barcodeInput,'input')
      // this.$refs.barcodeInput.value = ''
      this.$refs.barcodeInput.focus()
      this.barCode = ''
    },
    handleBarCode(e){
      console.log(e.target.value,'value')
      // 对数据进行保存
      this.confirmLoading = true
      work({
        workCenterPlanCode: this.workCenterPlanCode,
        packageCode: e.target.value,
        num: '1',
        isolate: '0',
        unqualifiedNum: '0',
        type: 'singleCode'
      }).then(res => {
        this.getInfoWorkPlatform(this.workCenterPlanCode)
      }).catch(err =>{
        this.$message.error(err.msg)
      }).finally(_ => {
        this.confirmLoading = false
        // this.clearInput()
      })
    },
    getInfoWorkPlatform(workCenterPlanCode){
      this.confirmLoading = true
      infoWorkPlatform(workCenterPlanCode).then(res => {
        this.data = Object.assign({},this.data,res.data)
      }).catch(err => {
        this.$message.error(err.msg)
      }).finally(_=> {
        this.confirmLoading = false
      })
    },
    startPlan(){
      this.confirmLoading = true
      release(this.workCenterPlanCode).then(res => {
        this.getInfoWorkPlatform(this.workCenterPlanCode)
      }).catch(err => {
        this.$message.error(err.msg)
      }).finally(_=> {
        this.confirmLoading = false
      })
    }

  },
  mounted() {
    this.workCenterPlanCode = this.$route.query.workCenterPlanCode
    //
    if(this.workCenterPlanCode){
      this.getInfoWorkPlatform(this.workCenterPlanCode)
    }
  }
}
</script>

<style scoped>
.button-ctrl{
  width: 120px;height: 50px;font-size: 20px;
}
</style>